<!--
 * @Descripttion: your project
 * @version: 1.0
 * @Author: huxin
 * @Date: 2023-10-30 17:23:51
 * @LastEditTime: 2023-11-01 18:39:48
-->
<template>
    <div class='menu'>
        <div class="menu-wrap">
            <div class="menu-item" v-for="item in menuLists" :key="item.unique" @click="itemClick(item.itemName)">
                {{ item.itemName }}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter()

interface MenuType {
    unique: string | number,
    itemName: string,
    icon: string
}
const menuList = [
    {
        unique: '1',
        itemName: '音乐',
        icon: ''
    },
    {
        unique: '2',
        itemName: '电影',
        icon: ''
    },
    {
        unique: '3',
        itemName: '电视剧',
        icon: ''
    },
    {
        unique: '4',
        itemName: '电视剧1',
        icon: ''
    },
    {
        unique: '5',
        itemName: '电视剧2',
        icon: ''
    },
]
const menuLists: MenuType[] = reactive(menuList)

// item点击事件
const itemClick = (val: string) => {
    console.log('val', val);
    if (val == '音乐') {
        router.push({
            path: '/music'
        })
    }
}

</script>
<style scoped lang="less">
.menu {
    width: 100%;
    height: 200px;
    border: 1px solid #000;

    .menu-wrap {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;

        .menu-item {
            width: 20%;
            height: 50px;
            line-height: 50px;
            border: 1px solid #000;
            text-align: center;
        }
    }

}
</style>